<template>
    <el-button type="primary" size="default" @click="emit('setState',1)" icon="ele-Plus" :disabled="!category3Id">添加SPU</el-button>

    <el-table :data="spuPageList" border stripe :style="{ margin: '30px 0 ' }">
        <el-table-column type="index" width="80" label="序号" />
        <el-table-column label="SPU名称" prop="spuName"> </el-table-column>
        <el-table-column label="SPU描述" prop="description"> </el-table-column>
        <el-table-column label="操作">
            <template v-slot="{ row, $index }">
                <el-button type="primary" size="small" @click="addSku(row)" title="添加SKU" icon="ele-Plus"></el-button>
                <el-button type="primary" size="small" @click="emit('setState',1,row)" title="编辑SPU" icon="ele-Edit"></el-button>
                <el-button type="info" size="small" @click="showDetail(row)" title="查看SKU" icon="ele-Warning"></el-button>
                <el-button type="danger" size="small" @click="deleteSpu(row)" title="删除SPU" icon="ele-Delete"></el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination v-model:page-size="limit" v-model:current-page="page" :page-sizes="[3, 5, 7, 9]" :pager-count="5"
        layout="prev, pager, next, sizes" :total="total" />
    <el-dialog v-model="dialogTableVisible" title="Sku列表" @close="skuList = []">
        <el-table :data="skuList">
            <el-table-column property="skuName" label="名称" />
            <el-table-column property="price" label="价格" />
            <el-table-column property="weight" label="重量" />
            <el-table-column property="address" label="默认图片">
                <template #="{row}">
                    <img :src="row.skuDefaultImg" alt="" width="100">
                </template>
            </el-table-column>

        </el-table>
    </el-dialog>
</template>
  
  <script lang="ts">
  import { defineComponent } from "vue";
  
  export default defineComponent({
      name: "SpuList",
  });
  </script>
  
  <script setup lang="ts">
import { ref, watch } from "vue";
import { storeToRefs } from "pinia";
import { ElMessage } from "element-plus";
import useAttrStore from "@/stores/attr";
import { requestDeleteSpu, requestSpuList } from "@/api/spu";
import type { SpuInfoType } from "@/api/spu";
import { requestFindBySpuId, type SkuInfoListType } from "@/api/sku";

//接收自定义参数
const emit = defineEmits<{
    (event:'setState',state:number,row?:SpuInfoType):void
}>()

//初始化页码的数据
const limit = ref(3);
const page = ref(1);
const total = ref(0);

//拿到pinia中的三级分类数据
const attrStore = useAttrStore();
const { category3Id } = storeToRefs(attrStore);

//声明数据保存Spu分页列表
const spuPageList = ref<SpuInfoType[]>([]);
//发送spu分页列表请求
const getSpuPageList = async () => {
    try {
        //发送请求拿到数据
        const result = await requestSpuList(
            page.value,
            limit.value,
            category3Id.value as number
        );
        //把分页数据中的总数和分类列表交给我们的响应式数据
        spuPageList.value = result.records;
        total.value = result.total;
    } catch (e) {
        ElMessage.error("请求分页列表失败");
    }
};
//1.当三级分类被选择的时候,展示当前三级分类下的所有spu
watch(
    category3Id,
    () => {
        if (category3Id.value === null) {
            //如果三级分类变为null,则清空分页列表
            spuPageList.value = [];
            total.value = 0;
            return;
        }
        //一旦cayegory3Id发生变化,就立即发送请求 请求新的分页列表
        getSpuPageList();
    },
    { immediate: true }
);
//2.监听当前页和每页条数，重新发送请求
watch([page,limit],() => {
    if(category3Id.value === null) return
    //重新发送请求
    getSpuPageList();
})

//3.删除spu
const deleteSpu = async (row:SpuInfoType) => {
    try {
        await requestDeleteSpu(row.id as number)
        ElMessage.success('删除成功')
        //重新发送请求
        getSpuPageList();
    } catch (e) {
        ElMessage.error('删除失败')
    }
}

//4.添加sku
const addSku = (row:SpuInfoType) => {
    emit('setState',2,row)
}

const dialogTableVisible = ref(false)
const skuList = ref<SkuInfoListType>([])
//查看sku详情
const showDetail = async (row:SpuInfoType) => {
    dialogTableVisible.value = true
    try{
        const re = await requestFindBySpuId(row.id as number)
        skuList.value = re
    }catch(e){
        ElMessage.error('查看失败')
    }
}
</script>
  